<template>
  <div class="applicationReminderContainer">
    <!-- <el-card class="box-card"
             shadow="never">
      <div slot="header"
           class="clearfix">
        <div style="font-weight: 700; font-size: 19px">支付账单</div>
        <div class="selectTime">
          <ul class="timeTab"
              v-for="(item, index) in options"
              :key="index">
            <li :class="[currentIndex == index ? 'active' : '']"
                @click="switchTimeTab(index)">{{ item.value }}</li>
          </ul>

          <div class="filterDate">筛选日期</div>
          <el-date-picker v-model="sumbitForm.selectDateRange"
                          type="datetimerange"
                          unlink-panels
                          @change="dataTimePickFn"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          class="ele-fluid" />
        </div>
      </div>
      <div class="applicationInfo">
        <div class="Divider">
          <span>总金额</span>
          <div>{{ payTheBillInfo.havePaidAmount?payTheBillInfo.havePaidAmount:'0' }}元</div>

        </div>


        <div style="border-right: none"
             class="Divider">

          <span>已支付</span>
          <div style="color: #ff4d4f;">
            {{
                payTheBillInfo.havePaidCount
                  ? payTheBillInfo.havePaidCount
                  : '0'
              }}笔</div>

        </div>
      </div>
    </el-card> -->
    <el-card class="card"
             shadow="never">
      <UserSearch @search="reload"
                  :currentPlatform="currentPlatform"
                  :oemList="oemList"
                  :secondaryList="secondaryList"></UserSearch>
    </el-card>
    <el-card shadow="never">
      <ele-pro-table ref="table"
                     :columns="columns"
                     :datasource="datasource"
                     :selection.sync="selection"
                     cache-key="systemUserTable">
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <div class="flex-align-center">
            <div v-for="(i, j) in stautsList"
                 :key="j"
                 @click="stautsClick(j)"
                 :class="stautsIndex == j ? 'sel-stauts-class' : 'stauts-class'">{{ i.name }}</div>
          </div>
        </template>
        <template v-slot:payType="{ row }">
          <el-tag :type="row.payType == '1' ? 'success' : ''">
            {{ tradeTypeC(row.payType).status}}
          </el-tag>

        </template>
        <!-- 用户名列 -->

        <!-- 角色列 -->
        <template v-slot:roles="{ row }">
          <el-tag v-for="item in row.roles"
                  :key="item.roleId"
                  size="mini"
                  type="primary"
                  :disable-transitions="true">
            {{ item.roleName }}
          </el-tag>
        </template>
        <!-- 状态列 -->
        <template v-slot:status="{ row }">
          <el-switch :active-value="2"
                     :inactive-value="1"
                     v-model="row.status"
                     @change="editStatus(row)" />
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-popconfirm class="ele-action"
                         title="是否确定要删除该笔支付账单信息"
                         @confirm="remove(row)">
            <template v-slot:reference>
              <el-link type="danger"
                       :underline="false"
                       icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>
<script>
import moment from 'moment';
import {
  getPayTheBill,
  getPayTheBillPageList,
  PayTheBillDelete
} from '@/api/paymentManagement';
import { oemAgentQuery } from '@/api/oem';
import UserSearch from './components/user-search.vue';
export default {
  name: 'payBills',
  components: {
    UserSearch
  },
  data () {
    return {
      labelPosition: 'top',
      // 当前索引
      currentIndex: 1,
      //  当前状态索引
      currentIndexStatus: 0,
      // 当天时间的实例
      currentMoment: null,
      // OEM代理数组
      oemList: [],
      //   二级代理
      secondaryList: [],
      //   当前什么端
      currentPlatform: '',
      options: [
        {
          value: '昨天'
        },
        {
          value: '今天'
        },

        {
          value: '前天'
        },
        {
          value: '近七天'
        }
      ],

      payTheBillInfo: {},
      //  状态配置
      statusoptions: [
        {
          label: '全部的状态',
          allStatusNumber: 5
        },
        // {
        //   label: '未支付',
        //   allStatusNumber: 15
        // },
        {
          label: '已支付',
          allStatusNumber: 119
        }
      ],
      sumbitForm: {
        selectDateRange: []
      },
      stautsIndex: 0,

      selection: [],
      //  状态配置
      stautsList: [
        {
          name: '全部状态',
          id: 0
        },
        {
          name: '微信',
          id: 1
        },
        {
          name: '支付宝',
          id: 2
        }
      ],
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left',
          sortable: true
        },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left',
          sortable: true
        },
        {
          prop: 'merchantName',
          label: '商家名称',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          align: 'center',
        },

        {
          prop: 'total',
          label: '订单金额',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          align: 'center',
        },
        {
          prop: 'payType',
          label: '交易类型',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          slot: 'payType',
          align: 'center',
        },
        {
          prop: 'parentCode',
          label: 'OEM代理',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          align: 'center',
        },
        {
          prop: 'oemCode',
          label: '下属代理',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          align: 'center',
        },
        {
          prop: 'transactionId',
          label: '订单编号',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          align: 'center',
        },

        {
          prop: 'createDate',
          label: '创建时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          width: 180,
          sortable: true,
          align: 'center',
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 180,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ]
    };
  },
  // 路由刷新
  activated () {
    this.switchTimeTab(this.currentIndex);
    this.queryOem();
    this.querySecondary();
    if (
      this.$store.state.user.info.oemId == null &&
      this.$store.state.user.info.merchantId == null
    ) {
      console.log('总平台');
      this.currentPlatform = '总平台';
    } else if (
      this.$store.state.user.info.oemId !== null &&
      this.$store.state.user.info.merchantId == null
    ) {
      console.log('oem代理');
      this.currentPlatform = 'oem代理';
    } else {
      console.log('商家端');
      this.currentPlatform = '商家端';
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    // 交易类型
    tradeTypeC () {
      return function (tradeType) {
        if (tradeType == '1') {
          return {
            status: '微信',
            type: ''
          };
        } else {
          return {
            status: '支付宝',
            type: 'danger'
          };
        }
      };
    },
  },
  methods: {
    // 查询确定
    dataTimePickFn (timeArr) {
      this.init(timeArr[0], timeArr[1]);
      this.currentIndex = 100;
    },
    // 申请提现头部数据查询
    async init (startTime = '', endTime = '') {
      const res = await getPayTheBill({
        startTime,
        endTime,
        oemId: this.$store.state.user.info.oemId
          ? this.$store.state.user.info.oemId
          : ''
      });
      console.log(res);
      if (res.code == 2000) {
        this.payTheBillInfo = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 查询所有代理
    queryOem () {
      oemAgentQuery({
        limit: 10,
        oemType: 1,
        page: 1,
        types: 1
      })
        .then((data) => {
          console.log('data===', data.list);
          this.oemList = data.list;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    // 查询所有二级代理
    querySecondary () {
      oemAgentQuery({
        limit: 10,
        oemType: 2,
        page: 1,
        types: 2,
        parentId: this.currentPlatform == 'oem代理' ? this.$store.state.user.info.oemId : ''
      })
        .then((data) => {
          console.log('data===', data.list);
          this.secondaryList = data.list;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    stautsClick (index) {
      if (index == 0) {
        this.stautsIndex = index;

        this.reload({ payType: '' });
      } else if (index == 1) {
        this.stautsIndex = index;

        this.reload({ payType: '1' });
      } else {
        this.stautsIndex = index
        this.reload({ payType: '2' })
      }
    },
    switchTimeTab (index) {
      this.sumbitForm.selectDateRange = [];
      this.currentIndex = index;
      this.currentMoment = moment();

      console.log(index);

      if (index == 0) {
        // 获取当前日期时间
        this.currentMoment.startOf('day');

        const currentDate = this.currentMoment.format('YYYY-MM-DD HH:mm:ss');
        console.log(currentDate);
        // 减去一天的时间
        const previousDate = this.currentMoment.subtract(1, 'days');

        // 格式化为指定的字符串格式（YYYY-MM-DD HH:mm:ss）
        const formattedDate = previousDate.format('YYYY-MM-DD HH:mm:ss');
        console.log(formattedDate);

        this.init(formattedDate, currentDate);
      } else if (index == 1) {
        // 获取当前日期时间
        this.currentMoment.startOf('day');
        const currentDate = this.currentMoment.format('YYYY-MM-DD HH:mm:ss');
        console.log(currentDate);

        const previousDate = this.currentMoment.add(1, 'days');

        const formattedDate = previousDate.format('YYYY-MM-DD HH:mm:ss');
        console.log(formattedDate);
        this.init(currentDate, formattedDate);
      } else if (index == 2) {
        // 获取当前日期时间
        this.currentMoment.startOf('day');
        const currentDate = this.currentMoment.format('YYYY-MM-DD HH:mm:ss');
        console.log(currentDate);

        const previousDate = this.currentMoment.subtract(2, 'days');

        const formattedDate = previousDate.format('YYYY-MM-DD HH:mm:ss');
        console.log(formattedDate);
        this.init(formattedDate, currentDate);
      } else if (index == 3) {

        const currentDate = this.currentMoment.format('YYYY-MM-DD HH:mm:ss');
        console.log(currentDate);
        this.currentMoment.startOf('day');
        // 减去一天的时间
        const previousDate = this.currentMoment.subtract(7, 'days');

        // 格式化为指定的字符串格式（YYYY-MM-DD HH:mm:ss）
        const formattedDate = previousDate.format('YYYY-MM-DD HH:mm:ss');
        console.log(formattedDate);
        this.init(formattedDate, currentDate);
      }
    },
    // 支付状态的切换
    tabStatusSwitch (index) {
      this.currentIndexStatus = index;
    },
    /* 表格数据源 */
    datasource ({ page, limit, where, order }) {
      //   console.log(where, order);
      //   if (!where.deleted) where.deleted = 0;
      return getPayTheBillPageList({
        ...where,
        ...order,
        page,
        limit,
        oemId: this.$store.state.user.info.oemId
          ? this.$store.state.user.info.oemId
          : ''
      });
    },
    reload (where) {
      console.log('where', where);
      this.$refs.table.reload({ where: where });
    },
    /* 删除 */
    remove (row) {
      const loading = this.$loading({ lock: true });
      PayTheBillDelete({ id: row.id })
        .then((msg) => {
          loading.close();
          this.$message.success(msg.msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.msg);
        });
    },
    /* 批量删除 */
    removeBatch () {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的代理吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          removeUsers({ ids: this.selection.map((d) => d.id) })
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    }
  }
};
</script>
<style lang="less" scoped>
.eleToolbarInfo() {
  font-weight: 700;
  margin-right: 10px;
  display: flex;
  align-items: center;
  &::after {
    content: attr(data-paidNumber);
    margin-left: 5px;
    min-width: 40px;

    max-width: 70px;
    height: 20px;
    display: inline-block;
    padding: 0 3px 0 3px;
    background-color: #f2f2f2;
    color: #c4c4c4;
    text-align: center;
    line-height: 23px;
    border-radius: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
  }
}
.active-eleToolbarInfo() {
  font-weight: 700;
  margin-right: 10px;
  display: flex;
  align-items: center;
  color: #1890ff;
  &::after {
    content: attr(data-paidNumber);
    margin-left: 5px;
    min-width: 40px;
    height: 20px;
    padding: 0 3px 0 3px;
    display: inline-block;
    background-color: #c8e1ec;
    color: #1890f7ff;
    text-align: center;
    line-height: 23px;
    border-radius: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
  }
}
/* 单行文字省略 */
.font-overflow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.applicationReminderContainer {
  min-width: 400px;
  .box-card {
    .clearfix {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 0 0 20px;
      min-width: 960px;
      .selectTime {
        display: flex;
        align-items: center;
        .timeTab {
          display: flex;
          align-items: center;
          margin-right: 20px;
          li {
            list-style-type: none;
            display: block;
            width: 48px;
            text-align: center;
          }
          .active {
            width: 64px;
            height: 26px;
            border-radius: 6px;
            background: #1890ff;
            color: #fff;
            text-align: center;
            line-height: 26px;
          }
        }
        .filterDate {
          text-align: center;
          line-height: 34px;
          width: 90px;
          height: 34px;
          font-size: 14px;
          border-radius: 2px 0px 0px 2px;
          border: 1px solid #d9d9d9;
          border-right: none;
        }
        .ele-fluid {
          width: 300px !important;
        }
      }
    }
  }

  .applicationInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      color: #757575;
      font-size: 18px;
    }
    .Divider {
      text-align: center;
      width: 50%;
      height: 90px;
      border-right: 1px solid #ebebeb;
    }
    // .Divider:first-child {
    //   /* 同级第一个并且为p的元素下的em元素 */
    //   padding-right: 220px;
    // }
    // .Divider:last-child {
    //   /* 同级第一个并且为p的元素下的em元素 */
    //   padding-left: 220px;
    // }
    div {
      margin: 3px 0 3px 0;
      color: #1e6ceb;

      font-size: 28px;
    }
  }
  .eleToolbar {
    padding: 10px;
    display: flex;
    align-items: center;
    .allStatus {
      .eleToolbarInfo();
      //   color: #303133;
      &::after {
        content: attr(data-content);
      }
    }
    .active-allStatus {
      .active-eleToolbarInfo();
      //   color: #303133;
      &::after {
        content: attr(data-content);
      }
    }
    .paid {
      .eleToolbarInfo();
      &::after {
        content: attr(data-paidNumber);
      }
    }
    .active-paid {
      .active-eleToolbarInfo();
      &::after {
        content: attr(data-paidNumber);
      }
    }
    .unPaid {
      .eleToolbarInfo();
      &::after {
        content: attr(data-unPaidNumber);
      }
    }
    .active-unPaid {
      .active-eleToolbarInfo();
      &::after {
        content: attr(data-unPaidNumber);
      }
    }
  }
}
.stauts-class,
.sel-stauts-class {
  font-size: 14px;
  margin: 0 26px 0 26px;
  padding: 9px 0px 9px;
  line-height: 19px;
}
.stauts-class {
  color: #757575;
}
.sel-stauts-class {
  color: #1e6ceb;
  border-bottom: 2px solid #1e6ceb;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
</style>
